Screen Wake Lock API: Förhindra skärmsläckning i webbapplikationer

Screen Wake Lock API är ett webb-API som tillåter webbapplikationer att förhindra att enheter dämpar eller låser skärmen. Detta är särskilt användbart för applikationer där kontinuerlig skärmsynlighet är avgörande, såsom mediaspelare, navigeringsappar och applikationer som kräver användarinteraktion under längre perioder.

Varför är Screen Wake Lock viktigt?

I dagens värld förväntar sig användarna sömlösa upplevelser. En enhet som automatiskt dämpar eller låser skärmen kan störa dessa upplevelser, särskilt när användare är aktivt engagerade i en webbapplikation. Tänk på dessa scenarier:

• Videouppspelning: Föreställ dig att du tittar på en film eller följer en matlagningshandledning och att skärmen ständigt dämpas, vilket tvingar dig att trycka på skärmen för att hålla den vid liv. Detta är en frustrerande upplevelse.
• Navigeringsappar: När du kör bil och använder en navigeringsapp måste skärmen vara på för att ge kontinuerliga anvisningar. En dämpad eller låst skärm kan leda till missade svängar och potentiella säkerhetsrisker.
• Presentationsappar: Att presentera bilder eller visa viktig information kräver att skärmen är aktiv under hela presentationen.
• Spelapplikationer: Många spel behöver oavbruten skärmsynlighet för att kunna spelas. Skärmsläckning kan störa spelupplevelsen.
• Online Whiteboards: Att samarbeta på en online whiteboard kräver att skärmen är aktiv så att användarna inte behöver trycka upprepade gånger för att återaktivera.

Screen Wake Lock API erbjuder en lösning på dessa problem, vilket tillåter webbapplikationer att kontrollera skärmens på/av-läge och ge en mer sömlös och användarvänlig upplevelse.

Webbläsarstöd

Från och med sent 2024 har Screen Wake Lock API bra stöd i de flesta stora webbläsare. Det är dock alltid viktigt att kontrollera den senaste webbläsarkompatibilitetsinformationen på resurser som Mozilla Developer Network (MDN) och Can I use för att säkerställa optimal kompatibilitet mellan webbläsare. Webbläsarstödet kan variera beroende på webbläsarversion och operativsystem.

Använda Screen Wake Lock API

Screen Wake Lock API är relativt enkelt att använda. Här är en sammanfattning av de viktigaste stegen:

1. Kontrollera API-stöd

Innan du försöker använda API:et är det viktigt att kontrollera om användarens webbläsare stöder det. Detta förhindrar fel i webbläsare som inte implementerar API:et.

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API stöds
} else {
  // Screen Wake Lock API stöds inte
  console.log('Screen Wake Lock API stöds inte av denna webbläsare.');
}

            

              
                Copy
              
            
          

2. Begär ett Wake Lock

För att begära ett wake lock, använd metoden navigator.wakeLock.request(). Denna metod returnerar ett Promise som löser sig med ett WakeLockSentinel-objekt om begäran lyckas. WakeLockSentinel-objektet representerar det aktiva wake lock.

            let wakeLock = null;

const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen wake lock active!');

    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock was released');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Anropa denna funktion för att aktivera wake lock
requestWakeLock();

            

              
                Copy
              
            
          

I detta exempel försöker funktionen requestWakeLock() att erhålla ett screen wake lock. Argumentet 'screen' specificerar att vi vill förhindra att skärmen dämpas eller låses. Om begäran lyckas loggas ett meddelande till konsolen. Koden innehåller också en felhanterare för att fånga eventuella undantag som kan uppstå under wake lock-begäran. Det är viktigt att koden lägger till en eventlyssnare för att lyssna på "release"-händelsen som indikerar när Wake Lock inte längre är aktiv. Detta kan hända om användaren uttryckligen har släppt låset eller om systemet har återkrävt det på grund av energisparåtgärder.

3. Släpp Wake Lock

Det är viktigt att släppa wake lock när det inte längre behövs. Underlåtenhet att göra det kan tömma enhetens batteri och påverka användarupplevelsen negativt. För att släppa wake lock, anropa metoden release() på objektet WakeLockSentinel.

            const releaseWakeLock = async () => {
  if (wakeLock) {
    await wakeLock.release();
    wakeLock = null;
    console.log('Screen wake lock released!');
  }
};

// Anropa denna funktion för att släppa wake lock
releaseWakeLock();

            

              
                Copy
              
            
          

Denna funktion släpper säkert wake lock och sätter variabeln wakeLock till null. Det är viktigt att säkerställa att variabeln wakeLock hanteras korrekt för att undvika fel vid frigöring av låset.

4. Hantera Wake Lock Release-händelser

Systemet kan släppa wake lock av olika anledningar, såsom användarinaktivitet eller lågt batteri. Det är viktigt att lyssna efter händelsen release på objektet WakeLockSentinel för att hantera dessa situationer på ett smidigt sätt. Detta gör att du kan begära wake lock igen eller vidta andra lämpliga åtgärder.

            wakeLock.addEventListener('release', () => {
  console.log('Screen Wake Lock was released');
  // Försök att begära wake lock igen
  // eller vidta andra lämpliga åtgärder
  requestWakeLock(); // Till exempel begära wakelock igen
});

            

              
                Copy
              
            
          

Detta exempel visar hur du lyssnar efter release-händelsen och potentiellt begär wake lock igen. Den faktiska implementeringen beror på de specifika kraven för din applikation.

Bästa metoder och överväganden

Även om Screen Wake Lock API är ett kraftfullt verktyg är det viktigt att använda det ansvarsfullt och överväga följande bästa metoder:

• Begär Wake Locks endast när det är nödvändigt: Undvik att hämta wake locks onödigt, eftersom de kan tömma enhetens batteri. Begär endast ett wake lock när kontinuerlig skärmsynlighet är verkligen nödvändig för användarupplevelsen.
• Släpp Wake Locks omgående: Släpp wake lock så snart det inte längre behövs. Detta hjälper till att spara batteri och förhindra onödig urladdning.
• Hantera Release-händelser på ett smidigt sätt: Var beredd på att systemet släpper wake lock oväntat. Lyssna efter händelsen release och vidta lämpliga åtgärder, såsom att begära wake lock igen eller informera användaren.
• Tillhandahåll användarkontroller: Överväg att ge användarna kontroller för att aktivera eller inaktivera wake lock-funktionen. Detta ger användarna mer kontroll över enhetens energiförbrukning och gör att de kan anpassa applikationens beteende. En mediaspelare kan till exempel ha en "Håll skärmen på"-knapp.
• Tänk på batteritiden: Var uppmärksam på påverkan på batteritiden. Att kontinuerligt hålla skärmen på kan avsevärt minska batteritiden, särskilt på mobila enheter. Informera användarna om den potentiella effekten och ge alternativ för att mildra den.
• Användartillstånd: Även om API:et i sig inte direkt ber om användartillstånd är det bra att meddela användaren att applikationen förhindrar skärmen från att slockna och tillåta dem att inaktivera detta beteende.
• Fallback-mekanism: För webbläsare som inte stöder API:et, överväg att implementera en fallback-mekanism. Detta kan innebära att du använder JavaScript för att periodvis skicka dummy-händelser till skärmen för att förhindra att den dämpas eller låses. Var dock medveten om att detta tillvägagångssätt kan vara mindre tillförlitligt och mer resurskrävande än att använda Screen Wake Lock API.
• Testning: Testa din applikation noggrant på olika enheter och webbläsare för att säkerställa att Screen Wake Lock API fungerar som förväntat. Var uppmärksam på batteriförbrukningen och användarupplevelsen.
• Tillgänglighet: Var medveten om att att alltid hålla skärmen på kan vara problematiskt för vissa användare. Att erbjuda sätt att inaktivera screen wake lock gör din applikation mer tillgänglig.

Exempel från verkligheten

• Mediaspelare: En videoströmmningsapp kan använda Screen Wake Lock API för att förhindra att skärmen dämpas under uppspelning, vilket ger en sömlös tittarupplevelse.
• Navigeringsappar: En navigeringsapp kan använda API:et för att hålla skärmen på medan användaren kör, vilket säkerställer att anvisningarna alltid är synliga.
• Presentationsappar: En presentationsapp kan använda API:et för att förhindra att skärmen dämpas under en presentation, vilket säkerställer att publiken alltid kan se bilderna.
• Fitnessappar: En fitnessapp som spårar ett träningspass kan hålla skärmen på så att användarna snabbt kan se mätvärden utan att behöva låsa upp sin enhet.
• Receptappar: En receptapp kan använda API:et för att hålla skärmen på medan användaren följer ett recept, vilket förhindrar att skärmen dämpas medan användaren lagar mat.
• Kioskapplikationer: Kioskapplikationer drar nytta av den här funktionen. Självbetjäningskiosker på flygplatser eller restauranger kan till exempel använda Screen Wake Lock API för att säkerställa att skärmen förblir aktiv och svarar på användarinteraktioner.
• Telemedicinapplikationer: Under virtuella läkarbesök, särskilt de som kräver observation, kan Screen Wake Lock API användas för att säkerställa att skärmen förblir på under hela konsultationen.

Kodexempel: Mediaspelare med Screen Wake Lock

Detta exempel visar hur du implementerar Screen Wake Lock API i en enkel mediaspelarapplikation.

            
<!DOCTYPE html>
<html>
<head>
  <title>Mediaspelare med Screen Wake Lock</title>
</head>
<body>
  <video id="myVideo" width="640" height="360" controls>
    <source src="your-video.mp4" type="video/mp4">
    Din webbläsare stöder inte videotaggen.
  </video>

  <button id="wakeLockBtn">Aktivera Screen Wake Lock</button>

  <script>
    const video = document.getElementById('myVideo');
    const wakeLockBtn = document.getElementById('wakeLockBtn');
    let wakeLock = null;

    const requestWakeLock = async () => {
      try {
        wakeLock = await navigator.wakeLock.request('screen');
        console.log('Screen wake lock active!');
        wakeLockBtn.textContent = 'Inaktivera Screen Wake Lock';

        wakeLock.addEventListener('release', () => {
          console.log('Screen Wake Lock was released');
          wakeLockBtn.textContent = 'Aktivera Screen Wake Lock';
        });

      } catch (err) {
        console.error(`${err.name}, ${err.message}`);
      }
    };

    const releaseWakeLock = async () => {
      if (wakeLock) {
        await wakeLock.release();
        wakeLock = null;
        console.log('Screen wake lock released!');
        wakeLockBtn.textContent = 'Aktivera Screen Wake Lock';
      }
    };

    wakeLockBtn.addEventListener('click', () => {
      if (wakeLock) {
        releaseWakeLock();
      } else {
        requestWakeLock();
      }
    });

    // Valfritt: Begär automatiskt wake lock när videon börjar spelas
    video.addEventListener('play', () => {
        if(!wakeLock){
            requestWakeLock();
        }
    });

  </script>
</body>
</html>

            

              
                Copy
              
            
          

Den här koden skapar en enkel mediaspelare med en knapp för att aktivera eller inaktivera screen wake lock. När knappen klickas begär koden antingen ett nytt wake lock eller släpper det befintliga. Knapptexten uppdateras för att återspegla det aktuella tillståndet för wake lock. Detta exempel innehåller också en valfri eventlyssnare som automatiskt begär wake lock när videon börjar spelas. Obs: Ersätt your-video.mp4 med den faktiska sökvägen till din videofil.

Säkerhetsöverväganden

Screen Wake Lock API är designat med säkerhet i åtanke. Webbläsare implementerar olika säkerhetsåtgärder för att förhindra missbruk av API:et. Till exempel kan webbläsare begränsa hur länge ett wake lock kan hållas eller kräva användarinteraktion innan de beviljar ett wake lock. Följ alltid de bästa metoderna som beskrivs tidigare i den här artikeln för att säkerställa att du använder API:et ansvarsfullt och etiskt.

Alternativ till Screen Wake Lock API

Innan Screen Wake Lock API använde utvecklare ofta "hacks" för att förhindra skärmsläckning. Dessa metoder är i allmänhet otillförlitliga och rekommenderas inte.

• No-Op Video Element: Infoga ett litet, tyst videoelement på sidan och spela det kontinuerligt. Detta lurar systemet att tro att media spelas, vilket förhindrar släckning. Detta är extremt resurskrävande.
• Dummy AJAX-förfrågningar: Skicka periodvis AJAX-förfrågningar till servern för att hålla enheten "aktiv". Detta är en dålig ersättning, eftersom det är nätverksintensivt och otillförlitligt.

Dessa metoder rekommenderas inte, eftersom de är otillförlitliga och kan påverka prestanda och batteritid negativt. Screen Wake Lock API är den rekommenderade lösningen för att förhindra skärmsläckning i webbapplikationer.

Slutsats

Screen Wake Lock API är ett värdefullt verktyg för webbutvecklare som vill skapa sömlösa och engagerande användarupplevelser. Genom att förhindra att enheter dämpar eller låser skärmen kan du säkerställa att dina applikationer förblir synliga och responsiva, även under längre perioder av inaktivitet. Kom ihåg att använda API:et ansvarsfullt och följ de bästa metoder som beskrivs i den här artikeln för att undvika att tömma enhetens batteri och påverka användarupplevelsen negativt. I takt med att API:et får bredare spridning kommer det utan tvekan att bli en viktig del av webbutvecklingsverktygslådan. Omfamna kraften i Screen Wake Lock API för att lyfta dina webbapplikationer och ge en mer förtjusande upplevelse för dina användare över hela världen.